<template>
	<view style="padding:10px">
		<view>
			<u-form>
				<u-form-item label="警务助理:"  border-bottom="false" label-width="150" >
					<zhilin-picker v-model="jwzlPickerShow" :datalist="options.jwzls"
				    @confirm="jwzlSelect" :showSearch="true"></zhilin-picker>
					<u-input v-model="jwzlNames" @click="jwzlPickerShow=!jwzlPickerShow" :disabled="true" placeholder="请选择警务助理"/>
					<u-icon class="arrowIcon" :name="arrowName" :class="[jwzlPickerShow ? 'arrowIconRotateRight' : 'arrowIconRotateDown']"></u-icon>
				</u-form-item>
				<u-form-item label="结果:"  border-bottom="false" label-width="150"  >
					<!-- <u-input v-model="result.label" type="select" :select-open="show" @click="show=true"/> --> 
					<picker @change="bindPickerChange" :value="value" range-key="label" :range="options.results" @cancel="cancelPicker" @click="pickerShow = !pickerShow">
					        <view class="uni-input">{{options.results[index].label}}</view>
					</picker>
					<u-icon class="arrowIcon" :name="arrowName" :class="[pickerShow ? 'arrowIconRotateRight' : 'arrowIconRotateDown']"></u-icon>
				</u-form-item>
				
				<u-form-item label="备注:"  border-bottom="false"  label-width="150" >
					<u-input v-model="formData.mark" />
				</u-form-item>
				<u-form-item label="签名:"  :border-bottom="border_bottom"  label-width="150" />
				<view class="wrapper" v-bind:class="[jwzlPickerShow ? 'hideSign' : 'showSign']">
					<view class="handCenter">
						<canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
						  @touchend="uploadScaleEnd" @tap="mouseDown" canvas-id="handWriting">
						</canvas>
					 </view>
					<view class="buttons">
						<button @click="retDraw" class="delBtn">重签</button>
						<button @click="subCanvas" :disabled="qmBtn" class="subBtn">完成签名</button>	
					</view>
				</view>
			</u-form>
			
			
			<u-button @click="doRate()" :disabled="submitBtn" type="primary">提交</u-button>
			
			<u-select v-model="show" :disabled="submitBtn" :list="options.results" @confirm="confirm"  safe-area-inset-bottom="true"></u-select>
			
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Handwriting from "../../utils/signature.js"
	import {mapState} from 'vuex'
	import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
	export default {
		components:{zhilinPicker},
		computed:mapState(['user', ]),
		data() {
			return{
				jwzlNames:'',
				jwzlPickerShow:false,			
				submitBtn:false,
				border_bottom:false,
				qmBtn: false,
				lineColor:'black',
				slideValue:50,
				handwriting:'',
				selectColor:'black',
				color:'',
				index: 0,
				show: false,
				pickerShow:false,
				arrowName:'arrow-down',
				url: this.$http.config.baseURL+'/cjlwpj/pj',
				signImage: '',
				isEnd: false , // 是否签名
				formData:{
					jwzls: [],
					result: '',
					mark: '',
					plr: ''
				},
				result: {},
				isRatedData:[],
				options: {
					jwzls: [],
					results: [{
							value: '1',
							label: '优秀'
						},
						{
							value: '2',
							label: '称职'
						},
						{
							value: '3',
							label: '基本称职'
						},
						{
							value: '4',
							label: '不称职'
						}],
					
				},
				
			}
		},
		methods:{
			jwzlSelect(value){
				let ids = value.split(",");
				this.formData.jwzls = [];
				this.jwzlNames = '';
				let jwzls = [];
				let list = [];
				this.formData.jwzls = value;
				if(ids!=undefined&&ids.length>0){
					for(let id of ids){
						list.push(this.options.jwzls.filter( jwzl => jwzl.value === parseInt(id))[0]);
					}
					for(let item of list){
						//this.formData.jwzls.push(JSON.stringify(item.value));
						jwzls.push(item.label);
					}
				}
				this.jwzlNames = jwzls.join(",");
			},
			cancelPicker(){
				this.pickerShow = false;
			},
			bindPickerChange: function(e) {
				this.pickerShow = false;
			    this.index = e.target.value;
				this.formData.result = this.getResult(this.index);
			 },
			getResult(index){
				return this.options.results[index].value;
			},
			resetPage(){
				this.result = {};
				this.formData.jwzl = '';
				this.formData.result = '';
				this.index = 0;
				this.formData.mark = '';
				this.formData.plr = '';
				this.signImage = '';
				this.retDraw();
			},
			confirm(res) {
				this.result = res[0];
				this.formData.result = this.result.value;
			},
			validateFormData(){
				let flag = true;
				if(this.formData.jwzls.length<1){
					this.$refs.uToast.show({
						title: '请选择警务助理',
						type: 'error'
					})
					flag = false;
					return flag;
				}
				if(!this.signImage){
					this.$refs.uToast.show({
						title: '请完成签名后提交',
						type: 'error'
					})
					flag = false;
					return flag;
				}
				return flag;
			},
			doRate(){
				if(this.validateFormData()){
					
					this.submitBtn = true;
					var _this = this;
					uni.uploadFile({
						url:this.url,
						filePath:this.signImage,
						name:'file',
						formData:this.formData,
						success: (res) => {
							let _data = JSON.parse(res.data).data;				
							if(_data){
								_this.$refs.uToast.show({
									title: '评价成功',
									type: 'success',
									callback: ()=>{
										_this.$u.route({
											type:'back',
											delta: 1
										})
									}
								})
							}else{
								_this.submitBtn = false;
							}
						},
						fail:(fail) =>{
							this.submitBtn = false;
							console.log(fail);
						}
					})
				}
				
			},
			// 选择画笔颜色
			selectColorEvent(event) {
				  this.selectColor = event;
				if(event=='black'){
					this.color= '#1A1A1A'
				}else if(event=='red'){
					this.color= '#ca262a'
				} 
				this.handwriting.selectColorEvent(this.color)
			  },
			retDraw() {
				this.qmBtn = false;
				this.handwriting.retDraw()
				this.signImage = '';
			  },
			  // 笔迹粗细滑块
			updateValue(e) {
				  console.log(e.detail);
				  this.slideValue = e.detail.value;
				this.handwriting.selectSlideValue(this.slideValue);
			  },
			uploadScaleStart(event){
				  this.handwriting.uploadScaleStart(event)
			  },
			uploadScaleMove(event){
				  this.handwriting.uploadScaleMove(event)
			  },
			uploadScaleEnd(event){
				  this.handwriting.uploadScaleEnd(event)
				  this.isEnd = true;
			  },
			subCanvas(){
				if(!this.isEnd){
					this.$refs.uToast.show({
						title: '尚未签名，请签名后保存',
						type: 'error'
					})
					return;
				}
				  this.handwriting.saveCanvas().then(res=>{
					  this.signImage = res;
					  this.qmBtn = true;
					  this.$refs.uToast.show({
						title: '已完成签名',
						type: 'success'
					  }) 
					  console.log(res);
				  }).catch(err=>{
					  console.log(err);
				  });		  
				  
			},
			//检查已经评价过的数据（这里主要是警务助理信息）
			checkIsRatedData(){
				this.$http.get("/cjlwpj/ratedData").then(res=>{
					this.isRatedData = res.data.data || [];
					this.options.jwzls = this.options.jwzls.filter(jwzl => {
						return this.isRatedData.indexOf(parseInt(jwzl.value)) == -1;
						});
				}).catch(e =>{
					
				})
			}
		},
		onReady() {
			this.checkIsRatedData();
			
		},
		onLoad: function(options) {
			this.handwriting = new Handwriting({
			  lineColor: this.lineColor,
			  slideValue: this.slideValue, // 0, 25, 50, 75, 100
			  canvasName: 'handWriting',
			});
			
			this.formData.plr = this.user.user.id || '';
			this.formData.result = this.getResult(this.index);
			let jwzls = this.user.jwzls.concat();
			this.options.jwzls = jwzls;
			this.options.jwzls.shift();
		},
	}
</script>

<style scoped>
	.wrapper {
	  width: 100%;
	  height: 100%;
	  margin: 30upx 0;
	  overflow: hidden;
	  display: flex;
	  align-content: center;
	  flex-direction: column;
	  justify-content: center;
	  font-size: 28upx;
	}
	.handWriting {
	  background: #fff;
	  width: 100%;
	  height: 350upx;
	}
	
	.handCenter {
	  border: 4upx dashed #e9e9e9;
	  flex: 5;
	  overflow: hidden;
	  box-sizing: border-box;
	  width: 90%;
	  margin: 0 auto;
	}
	.buttons{
		display: flex;
		width: 100%;
		margin-top: 20upx;
		justify-content: space-between;
	}
	.buttons>button{
		display: inline-block;
		font-size: 30upx;
		height: 80upx;
		
	}
	.delBtn {
	  color: #666;
	}
	.subBtn {
	  background: #008ef6;
	  color: #fff;
	  text-align: center;
	  justify-content: center;
	}
	
	.arrowIcon{
		position: absolute;
		right: 10rpx;
		top: 40rpx;
	}
	
	.arrowIconRotateRight{
		transition: all .5s ease 0s;
		transform: rotate(-180deg);
	}
	
	.arrowIconRotateDown{
		transition: all .5s ease 0s;
		transform: rotate(0deg);
	}
	
	.showSign{
		animation: fadeIn .3s;
		display: flex;
	}
	.hideSign{
		animation: fadeOut .3s;
		display: none;
	}
	@keyframes fadeOut{
	 0% {
			opacity: 1;
			transform: translateY(0px);
		}
	 50% {
		opacity: 0.5;
		transform: translateY(5px);
		 }
	 100%{
		
		opacity: 0; 
		transform: translateY(10px);
		}
	}
	@keyframes fadeIn{
	 0% {opacity: 0; transform: translateY(10px);}
	 50% {opacity: 0.5; transform: translateY(5px);}
	 100%{opacity: 1; transform: translateY(0px);}
	}
</style>
